<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">拼团</h3>
    <el-form :model="groupForm" ref="groupForm" label-width="76px">
      <div class="set-part mt20">
        <el-form-item label="添加方式" prop="title">
          <el-radio-group v-model="groupForm.data.selectType">
            <el-radio :label="1">手动添加</el-radio>
            <el-radio :label="2">自动获取</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="list_part">
          <div v-if="groupForm.data.selectType===1" class="goods_box">
            <ul v-if="groupForm.data.goodsPics || groupForm.data.goodsPics.length" class="goods_list" v-for="(item, index) in groupForm.data.goodsPics" :key="index">
              <li class="goods_item">
                <img class="goods_pic" :src="item" />
                <i class="goods_delete el-icon-close" @click="deleteGoods(index)"></i>
              </li>
            </ul>
            <div class="add-goods" @click="selectGoods()"><i class="el-icon-plus"></i></div>
          </div>
          <div v-if="groupForm.data.selectType===2">
            <div class="category_box">
              <div class="item-box">分类名称</div>
              <div class="item-delete">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <div class="add-button">
              <el-button plain><i class="el-icon-plus"></i>添加商品分组</el-button>
            </div>
          </div>
        </div>
        <div class="class_box">
          <el-form-item label="列表样式" prop="listStyle">
            <div class="val-show">{{groupForm.style.listStyle | filterRadio(listStyleOption)}}</div>
          </el-form-item>
          <div class="brother_row" style="margin-top: -10px;margin-bottom: 20px;">
            <en-radio-tab
              :optionsData="listStyleOption"
              :defaultData="groupForm.style.listStyle"
              v-model="groupForm.style.listStyle">
            </en-radio-tab>
          </div>
        </div>

        <!-- 商品样式开始 -->
        <el-form-item label="商品倒角" prop="proRadius">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.proRadius | filterRadio(radiusOption)}}</div>
            <en-radio-tab
              :optionsData="radiusOption"
              :defaultData="groupForm.style.proRadius"
              v-model="groupForm.style.proRadius">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="图片比例" prop="imgPercent">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.imgPercent | filterRadio(imgRatioOption)}}</div>
            <en-radio-tab
              :optionsData="imgRatioOption"
              :defaultData="groupForm.style.imgPercent"
              v-model="groupForm.style.imgPercent">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="图片填充" prop="backFill">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.backFill | filterRadio(fillOption)}}</div>
            <en-radio-tab
              :optionsData="fillOption"
              :defaultData="groupForm.style.backFill"
              v-model="groupForm.style.backFill">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="文本样式" prop="fontWeight">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.fontWeight | filterRadio(fontWeightOption)}}</div>
            <en-radio-tab
              :optionsData="fontWeightOption"
              :defaultData="groupForm.style.fontWeight"
              v-model="groupForm.style.fontWeight">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="文本对齐" prop="textAlign">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.textAlign | filterRadio(textAlignOption)}}</div>
            <en-radio-tab
              :optionsData="textAlignOption"
              :defaultData="groupForm.style.textAlign"
              v-model="groupForm.style.textAlign">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="页面边距" prop="pagePadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="groupForm.style.pagePadding"></el-slider>
            <el-input class="row-input" v-model.number="groupForm.style.pagePadding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="商品间距" prop="proPadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="groupForm.style.proPadding"></el-slider>
            <el-input class="row-input" v-model.number="groupForm.style.proPadding"></el-input>
          </div>
        </el-form-item>
        <!-- 商品样式结束 -->

        <!-- 商品展示配置开始 -->
        <el-form-item label="商品名称" prop="showTitle">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showTitle?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showTitle"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品描述" prop="showDes">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showDes?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showDes"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品价格" prop="showPrice">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showPrice?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showPrice"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品原价" prop="showOldPrice">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showOldPrice?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showOldPrice"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="购买按钮" prop="showBuyBtn">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showBuyBtn?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showBuyBtn"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="抢购倒计时" label-width="90px" prop="showTime">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showTime?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showTime"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="已团人数" prop="showSold">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.showSold?'显示':'不显示'}}</div>
            <el-checkbox v-model="groupForm.style.showSold"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="隐藏已售罄商品" label-width="118px" prop="hideSellOut">
          <div class="flex">
            <div class="val-show flex-1">{{groupForm.style.hideSellOut?'显示':'隐藏'}}</div>
            <el-checkbox v-model="groupForm.style.hideSellOut"></el-checkbox>
          </div>
        </el-form-item>
        <!-- 商品展示配置结束 -->
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>

    <en-pintuan-dialog
      :show="dialogPintuanShow"
      :default-data="defaultPintuanDataDialog"
      @close="dialogPintuanShow = false"
      @confirm="handlePintuanDialogConfirm"/>
  </div>
</template>

<script>
  import mixin from '../../mixin';
  export default {
    name: 'EnGroupBuyPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      },
      placeholder: {
        type: String,
        default: '请输入关键字'
      },
    },
    data() {
      return {
        visible: this.show,
        groupForm: {
          data: {
            skuIds: [],         // 商品ids
            goodsPics: [],
            selectType: 1         // 商品选择类型
          },
          style: {
            listStyle: 'row_one', // 列表样式
            proRadius: 0, // 商品角度
            imgPercent: 100, // 图片比例
            backFill: 'cover', // 填充样式
            fontWeight: 'normal',  // 文本样式
            textAlign: 'left', // 文本对齐
            pagePadding: 15, // 页面边距
            proPadding: 10, // 商品间距
            showTitle: true, // 是否显示标题
            showDes: true, // 是否显示描述
            showPrice: true, // 是否显示价格
            showOldPrice: false, // 是否显示原价
            showBuyBtn: true, // 是否显示按钮
            showTime: true, // 是否显示抢购倒计时
            showSold: true, // 是否显示已团人数
            hideSellOut: false // 是否隐藏已售罄
          },
        },
        textAlignOption: [{
          value: 'left',
          label: '靠左显示',
          icon: 'fonticon-align-left'
        },{
          value: 'center',
          label: '居中显示',
          icon: 'fonticon-align-center'
        }],
        fontSizeOption: [{
          value: 16,
          label: '大(16号)',
          icon: 'fonticon-font-size'
        },{
          value: 14,
          label: '中(14号)',
          icon: 'fonticon-font-size'
        },{
          value: 12,
          label: '小(12号)',
          icon: 'fonticon-font-size'
        }],
        radiusOption: [{
          value: 0,
          label: '直角',
          icon: 'fonticon-radius-no'
        },{
          value: 4,
          label: '圆角',
          icon: 'fonticon-radius-yes'
        }],
        listStyleOption: [{
          value: 'row_one',
          label: '大图',
          icon: 'fonticon-good-style1'
        },{
          value: 'row_two',
          label: '一行两个',
          icon: 'fonticon-good-style2'
        },{
          value: 'row_three',
          label: '一行三个',
          icon: 'fonticon-good-style3'
        },{
          value: 'row_list',
          label: '列表',
          icon: 'fonticon-good-style4'
        },{
          value: 'row_hybrid',
          label: '一大两小',
          icon: 'fonticon-good-style5'
        }],
        imgRatioOption: [{
          value: 133,
          label: '4:3',
          icon: 'fonticon-back-style1'
        },{
          value: 100,
          label: '1:1',
          icon: 'fonticon-back-style2'
        },{
          value: 75,
          label: '3:4',
          icon: 'fonticon-back-style3'
        },{
          value: 177,
          label: '16:9',
          icon: 'fonticon-back-style4'
        }],
        fillOption: [{
          value: 'cover',
          label: '填充',
          icon: 'fonticon-back-cover'
        },{
          value: '',
          label: '留白',
          icon: 'fonticon-back-empty'
        }],
        fontWeightOption: [{
          value: 'normal',
          label: '常规体',
          icon: 'fonticon-font-normal'
        },{
          value: 'bold',
          label: '加粗体',
          icon: 'fonticon-font-bold'
        }],
        dialogPintuanShow: false,
        defaultPintuanDataDialog: []
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.$nextTick(() => {
          if (_showData.dataSource) {
            this.groupForm = _showData.dataSource;
          } else {
            this.groupForm.style = _showData.style;
          }
        });
      }
    },
    methods: {
      /*
        * @date 2020-01-14
        * @author wolfMan
        * @description {选择商品弹层}
      */
      selectGoods () {
        this.dialogPintuanShow = true;
        // this.groupForm.data.skuIds.forEach(id => {
        //   this.defaultGoodsDataDialog.push(id);
        // });
      },
      /*
        * @date 2020-01-14
        * @author wolfMan
        * @description {移除已选中的商品}
      */
      deleteGoods (_index) {
        this.groupForm.data.skuIds.splice(_index, 1);
        this.groupForm.data.goodsPics.splice(_index, 1);
      },
      /*
        * @date 2020-02-05
        * @author wolfMan
        * @description {拼团商品弹层数据提交}
      */
      handlePintuanDialogConfirm(list) {
        let _list = this.MixinClone(list);
        let _skuIds = [];
        let _goodsPics = [];
        _list.forEach(item => {
          _skuIds.push(item.skuId);
          _goodsPics.push(item.image);
        });
        this.$nextTick(() => {
          this.groupForm.data.skuIds = _skuIds;
          this.groupForm.data.goodsPics = _goodsPics;
        });
      },
      /*
        * @date 2020-01-14
        * @author wolfMan
        * @description {数据提交}
      */
      handleConfirm() {
        this.$refs['groupForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.groupForm);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .list_part {
  margin-left: -20px;
  margin-right: -20px;
  padding: 5px 15px;
  overflow: hidden;
  background: #f2f2f2;
  .goods_box {
    .goods_list {
      float: left;
      list-style: none;
      padding-left: 0;
      margin: 0;
      &::before,
      &::after {
        content: '';
        display: block;
        clear: both;
        overflow: hidden;
      }
    }
    .goods_item,
    .add-goods {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: relative;
      float: left;
      margin: 5px 10px 5px 0;
      width: 65px;
      height: 65px;
      border: solid 1px #e6e6e6;
      box-sizing: border-box;
      cursor: pointer;
      background: #fff;
      color: #3870EA;
      font-size: 18px;
      font-weight: 700;
    }
    .goods_pic {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
    .goods_delete {
      position: absolute;
      top: -8px;
      right: -8px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      cursor: pointer;
      background: #CACACA;
      color: #fff;
      font-size: 14px;
    }
  }
}
.class_box {
  padding-top: 20px;
  padding-bottom: 10px;
  margin-top: 30px;
  margin-bottom: 20px;
  border-top: solid 1px #e6e6e6;
  border-bottom: solid 1px #e6e6e6;
}
</style>
